window.addEventListener('load', function () {
    var sliderContent = document.querySelector('.slider_content');
    var ul = sliderContent.querySelector('ul');
    var ol = sliderContent.querySelector('ol');

    var sliderWidth = sliderContent.clientWidth
    var index = 1;
    var flage = false;
    var startX = 0;
    var moveX = 0;

    ul.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        startX = e.targetTouches[0].pageX;
        flage = false;
    })
    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX - startX;
        var translateX = -index * sliderWidth + moveX;
        ul.style.transform = 'translateX(' + translateX + 'px)';
        flage = true;
    })


    ul.addEventListener('touchend', function () {
        if (flage) {
            if (Math.abs(moveX) > sliderWidth * 0.5) {
                if (moveX < 0) {
                    index++;
                } else {
                    index--;
                }
            }

            var translateX = -index * sliderWidth;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }

        timer = setInterval(function () {
            index++;
            var translateX = -index * sliderWidth;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
    })

    ul.addEventListener('transitionend', function () {
        if (index > 3) {
            index = 1;
        } else if (index <= 0) {
            index = 3;
        }

        ul.style.transition = 'none';
        var translateX = -index * sliderWidth;
        ul.style.transform = 'translateX(' + translateX + 'px)';
        ol.querySelector('.current').classList.remove('current');
        ol.children[index - 1].classList.add('current');
    })

    var timer = setInterval(function () {
        index++;
        var translateX = -index * sliderWidth;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000)
})